<template>
  <el-row :gutter="20">
    <el-col :span="6">
<div class="info">
        <div class="info-block" style="border: none">
          <dl class="dl-horizontal">
            <dt>试卷标题：</dt>
            <dd>{{testPaper.title}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>题目个数：</dt>
            <dd>{{testPaper.question_count}}</dd>
          </dl>
        <dl class="dl-horizontal">
            <dt>作答时间：</dt>
            <dd>{{testPaper.duration}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>满分：</dt>
            <dd>{{testPaper.full_score}}</dd>
          </dl>
        </div>
           <div class="info-block" style="border: none">
          <dl class="dl-horizontal">
            <dt>答题人数：</dt>
            <dd>{{testPaper.answer_count}}</dd>
          </dl>
        <dl class="dl-horizontal">
            <dt>最高分：</dt>
            <dd>{{testPaper.highest_score}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>最低分：</dt>
            <dd>{{testPaper.lowest_score}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>平均分：</dt>
            <dd>{{testPaper.average_score}}</dd>
          </dl>
        </div>
</div>
    </el-col>
    <el-col :span="18">
      <div class="info">
        <template v-for="question in questionList">
          <div class="info-block">
              <dl class="dl-horizontal">
                <dt>题目：</dt>
                <dd>{{question.title}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>选项：</dt>
                <dd v-html="optionsFormatter(question.select_options)"></dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>正确答案：</dt>
                <dd>{{parseInt(question.answer)+1}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>解析：</dt>
                <dd>{{question.analysis}}</dd>
              </dl>
            </div>
        </template>
      </div>
      <div style="text-align: center">
        <el-pagination :current-page="filterFrom.pnum" :page-sizes="[5, 10, 15, 20]" :page-size="filterFrom.records" layout="sizes, prev, pager, next, jumper,total"
          :total="totalRecords" @size-change="handleSizeChange" @current-change="handlePageChange">
          </el-pagination>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import API from '../../../api'

  var filterFrom = {
    pnum: 1,
    records: 5
  }

  export default {
    props: ['curTestId'],
    data: function () {
      return {
        testPaper: {},
        questionList: [],
        filterFrom,
        totalRecords: 0
      }
    },
    watch: {
      curTestId: function (val, oldVal) {
        if (val !== oldVal) {
          this.fetchData()
        }
      }
    },
    methods: {
      handleSizeChange: function (val) {
        this.filterFrom.records = val
        // this.fetchData()
      },
      handlePageChange: function (val) {
        if (filterFrom.pnum !== val) {
          this.filterFrom.pnum = val
          // this.fetchData()
        }
      },
      fetchData: function () {
        if (!this.curTestId) return
        this.isLoading = true
        this.filterFrom.id = this.curTestId
        API.courseLessonTest(this.filterFrom,
          (data) => {
            this.isLoading = false
            if (!data) return
            this.testPaper = data
            if (data.question_list) {
              this.questionList = data.question_list
              this.totalRecords = this.questionList.length
            } else {
              this.totalRecords = 0
            }
          }
        )
      },
      optionsFormatter: function (selectOptions) {
        var options = JSON.parse(selectOptions)
        var result = ''
        for (var i = 0, len = options.length; i < len; i++) {
          result += (i + 1) + '、'
          result += options[i]
          result += '<br/>'
        }
        return result
      }
    }
  }

</script>

<style scoped>
  .info {
    padding: 5px 10px;
  }

  .info-block {
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    overflow: auto;
  }

  .info :last-child {
    margin-bottom: 0px;
  }

  dt {
    width: 80px;
  }
  dd{
    margin-left:85px;
  }
</style>
